<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
		<META HTTP-EQUIV="Expires" CONTENT="0">
		<title>用户登录</title>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zDialog.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zDrag.js" type="text/javascript" charset="utf-8"></script>
		<!-- ZUI 标准版压缩后的 CSS 文件 -->
		<link rel="stylesheet" href="node_modules/zui/dist/css/zui.min.css">

		<!-- ZUI Javascript 依赖 jQuery -->
		<!--<script src="node_modules/zui/dist/lib/jquery/jquery.js"></script>-->
		<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
		<script src="node_modules/zui/dist/js/zui.min.js"></script>
		<script type="text/javascript">
			function login() {
				$.ajax({
					cache: false,
					type: "post",
					url: "login",
					data: $('#login').serialize(),
					async: false,
					error: function(request) {
						var diag = new Dialog();
						diag.AutoClose = 3;
						diag.ShowCloseButton = false;
						diag.URL = "javascript:void(document.write(\'发送请求失败\'))";
						diag.show();
					},
					success: function(data) {
						if(data == "0") {
							var diag = new Dialog();
							diag.AutoClose = 3;
							diag.ShowCloseButton = false;
							diag.URL = "javascript:void(document.write(\'登陆失败，请检查用户名或密码\'))";
							diag.show();
						} else {
							var diag = new Dialog();
							diag.AutoClose = 3;
							diag.ShowCloseButton = false;
							diag.URL = "javascript:void(document.write(\'登录成功，正在跳转...\'))";
							diag.show();
							setTimeout("location.href='success.html'", 2000);
						}
					}
				});
			}
		</script>
		<style type="text/css">
			.divsty {
				width: 500px;
				height: 300px;
				margin: 0px auto;
				margin-top: 100px;
				background-color: white;
				-webkit-opacity: 0.8;
				/* Netscape and Older than Firefox 0.9 */
				-moz-opacity: 0.8;
				/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
				-khtml-opacity: 0.8;
				/* IE9 + etc...modern browsers */
				opacity: .8;
				/* IE 4-9 */
				filter: alpha(opacity=80);
				/*This works in IE 8 & 9 too*/
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
				/*IE4-IE9*/
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				border: 3px solid white;
				border-radius: 5px 6px 7px 8px;
			}
			
			.divsty1 {
				width: 200px;
				height: 200px;
				margin: 0px auto;
				line-height: 40px;
			}
		</style>
	</head>

	<body background="img/b.jpg">
		<div class="divsty">
			<div class="divsty1">
				<form id="login">
					<div class="form-group">
						<label for="username">账号</label>
						<input type="text" name="username" class="form-control" id="username" placeholder="电子邮件/手机号/用户名">
					</div>
					<div class="form-group">
						<label for="password">密码</label>
						<input type="password" class="form-control" id="password" name="password" placeholder="">
					</div>
					<button type="button" onclick="login()" class="btn btn-primary">登录</button>
					<a href="register.html">注册用户</a>
					<form>
			</div>
		</div>
	</body>

</html>